<template>
	<view style="width: 94%;margin: 0 auto;">
		<view v-if="type==0">
			<view class="flexs2 frist" style="padding-top: 0;padding-bottom: 30rpx;width: 97%;">
				<view style="width: 70rpx;display: flex;justify-content: center;align-items: center;"
					v-for="(item, index) in topData" :key="index">{{item}}人</view>
			</view>
			<view class="width615 flexs">
				<view class="bg1">
					<u-line-progress :percentage="Current" :showText="false" activeColor="#FD774E"></u-line-progress>
				</view>
				<view class="flexs3-yuans">
					<view class="flexs3-yuans-item" v-for="(item, index) in list" :key="item.id" :style="{'margin-left':index==0?'-6rpx':'0','margin-right':index==4?'-6rpx':'0'}">
						<view class="first" v-if="item.isTrue">
							<view class="red-bag">
								<text>{{item.jine}}元</text>
							</view>
						</view>
						<view class="second" v-else>
							<view class="red-bag">
								<text>{{item.jine}}元</text>
							</view>
						</view>
					</view>

				</view>

			</view>
		</view>
        <view v-if="type==1">
        	<view  class="flexs2 frist" style="padding-top: 0;padding-bottom: 30rpx;width: 97%;">
        	  <view style="width: 70rpx;display: flex;justify-content: center;align-items: center;color: #EE5888;" 
			   v-for="(item, index) in topData" :key="index">{{item}}人</view>
            </view>
        	<view class="width615 flexs">
        		<view class="bg1">
        			<u-line-progress    :percentage="Current"  :showText="false" activeColor="#EC005F"></u-line-progress>
        		</view>
        		<view class="flexs3-yuans">
        			<view class="flexs3-yuans-item" v-for="(item, index) in list" :key="item.id" :style="{'margin-left':index==0?'-6rpx':'0','margin-right':index==4?'-6rpx':'0'}">
        				<view class="first"  v-if="item.isTrue">
        					<view class="red-bag2">
        						<text>{{item.jine}}元</text>
        					</view>
        				</view>
        				<view class="second" v-else>
        					<view class="red-bag2">
        						<text>{{item.jine}}元</text>
        					</view>
        				</view>
        			</view>
        
        		</view>
        
        	</view>
        </view>



	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default: []
			},
			topData: {
				type: Array,
				default: []
			},
			
			type: {
				type: Number,
				default: 0
			},
			Current: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				sums: 4,
				width: 0,
				isShowImg: false
			}
		},
		watch: {
			// list(val) {
			// 	console.log(val)
			// },
			// StepInfo(val){
			// 	console.log((val.Current / val.Sum).toFixed(2))
			// 	this.width = val.Current
			// 	this.sums = val.Sum - 1
			// },
		},
		onLoad() {

			// console.log(this.isShowImg)
		},
		mounted() {
			// setTimeout(()=>{
			// 	this.isShowImg  = true
			// },500)
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.num {
		width: 94%;
		margin: 0 auto;

		view {
			width: 20%;
			text-align: center;
		}
	}

	.width615 {
		width: 97%;
		height: 80rpx;
		margin: 0 auto;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.bg1 {
			width: 98%;
			// height: 4upx;
			background: #DDDDDD;

			.bg2 {
				height: 100%;
				background: #3687F7;
			}
		}

		.flexs3-yuans {
			width: 100%;
			height: 100rpx;
			// border: 1px solid;
			position: absolute;
			top: -10rpx;
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
           
			.flexs3-yuans-item {
				width: 100rpx;
				.first {
					display: flex;
					justify-content: center;
					align-items: center;
					// flex-direction: column;
					.red-bag{
						background-image: url('http://images.linglinggong.net/FjyTAVrVEQmLWwPlgF_Nz054ZDvt');
						background-size: 100% 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-size: 18rpx;
						width: 90rpx;
						height: 120rpx;
						// border: 1px solid #000;
						text{
							padding-top: 40rpx;
						}
					}
					.red-bag2{
						background-image: url('http://images.linglinggong.net/Fldf789UCXhTII7GlHpgtahpFIxq');
						background-size: 100% 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-size: 18rpx;
						width: 90rpx;
						height: 120rpx;
						text{
							padding-top: 40rpx;
						}
					}
				}

				.second {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					// margin-top: -10rpx;
                    .red-bag{
                    	background-image: url('http://images.linglinggong.net/FpwiLX3iwU3xpAi09MuJfB9pXboA');
                    	background-size: 100% 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-size: 18rpx;
						width: 90rpx;
						height: 120rpx;
						// border: 1px solid #000;
						text{
							padding-top: 40rpx;
						}
                    }
					.red-bag2{
						background-image: url('http://images.linglinggong.net/FpwiLX3iwU3xpAi09MuJfB9pXboA');
						background-size: 100% 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fff;
						font-size: 18rpx;
						width: 90rpx;
						height: 120rpx;
						text{
							padding-top: 40rpx;
						}
					}
					// border: 1px solid;
					image {
						width: 90rpx;
						height: 100%;
					}
				}
			}
		}

		.yuans {
			position: absolute;
			top: 0;
			left: -4rpx;
			// width: 104%;
			height: 100%;

			image {
				width: 40rpx;
				height: 100%;
				// border: 1upx solid;
			}

			.width32 {
				width: 32upx;
				text-align: center;
				display: flex;
				justify-content: center;
				// view{
				// 	background: #DDDDDD;
				// 	width: 22upx;
				// 	height: 22upx;
				// 	border-radius: 50%;
				// }
			}
		}

	}

	.p_bot {
		width: 670upx;
		margin: 15upx auto 0 auto;
	}

	.flexs {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.flexs1 {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.flexs2 {
		width: 97%;
		margin: 0 auto;
		// border: 1px solid;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}

	.flexs3 {
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.btns {
		width: 690upx;
		height: 90upx;
		border-radius: 45upx;
		background: #3687F7;
		font-size: 30upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 90upx;
	}

	.btns2 {
		width: 690upx;
		height: 80upx;
		border-radius: 8upx;
		background: #3687F7;
		color: #FFFFFF;
		text-align: center;
		line-height: 80upx;
	}

	.size24 {
		font-size: 24upx;
	}

	.size26 {
		font-size: 26upx;
	}

	.size30 {
		font-size: 30upx;
	}

	.size32 {
		font-size: 32upx;
	}

	.size20 {
		font-size: 20upx;
	}

	.text-gray {
		color: #999999;
	}

	.text-grey {
		color: #666666;
	}

	.text-blue {
		color: #3687F7;
	}

	.cuIcon-back {
		font-size: 40upx;
	}

	.frist {
		font-size: 22rpx;
		color: #FF3A47;
		padding-top: 15rpx;
	}

	.secend {
		font-size: 22rpx;
		color: #6355FF;
		padding-top: 15rpx;
	}
</style>
